import React, {
  useState,
  useImperativeHandle,
  forwardRef,
  useRef,
  useEffect,
} from 'react'
import type { PropsWithChildren } from 'react'
import { Shadow } from 'react-native-shadow-2'
import {
  Image,
  StyleSheet,
  TextInput,
  StyleProp,
  ViewStyle,
  Animated,
  ReturnKeyType,
  KeyboardTypeOptions,
} from 'react-native'
type OwlInputProp = PropsWithChildren<{
  password?: boolean
  placeholder: string
  appendsource?: any
  inputStyle?: StyleProp<ViewStyle>
  returnKeyType?: ReturnKeyType
  returnKeyLabel?: string
  keyboardType?: KeyboardTypeOptions
}>
export type OwlInputMethod = {
  getValue: () => string
  setValue: (val: string) => void
}
export default forwardRef(function OwlInput(props: OwlInputProp, ref: any) {
  const [value, setValue] = useState('')
  const [isFocus, setFocus] = useState(false)
  const txtIptRef = useRef<TextInput>(null)
  const focusStatus = useRef(new Animated.Value(0)).current
  const color = focusStatus.interpolate({
    inputRange: [0, 1],
    outputRange: ['rgba(244,152,156,1)', 'rgba(253,202,204,1)'],
  })
  useImperativeHandle(
    ref,
    () => ({
      getValue() {
        return value
      },
      setValue(val: string) {
        setValue(val)
      },
    }),
    [value],
  )
  useEffect(() => {
    Animated.spring(focusStatus, {
      toValue: isFocus ? 1 : 0,
      useNativeDriver: false,
    }).start()
  }, [isFocus])
  function onSubmitEditing() {
    txtIptRef.current?.blur()
  }
  return (
    <Shadow
      startColor="#00000010"
      distance={4}
      offset={[0, 4]}
      sides={{ bottom: true, start: true, end: true, top: false }}
    >
      <Animated.View
        style={[
          inputStyles.inputWrap,
          props.inputStyle,
          {
            backgroundColor: color,
          },
        ]}
      >
        <TextInput
          value={value}
          secureTextEntry={!!props.password}
          onChangeText={text => setValue(text)}
          cursorColor={'#ffffff'}
          onSubmitEditing={onSubmitEditing}
          returnKeyType={props.returnKeyType}
          returnKeyLabel={props.returnKeyLabel}
          placeholderTextColor={'#ffffff'}
          placeholder={props.placeholder || ''}
          style={inputStyles.input}
          keyboardType={props.keyboardType || 'default'}
          onFocus={() => setFocus(true)}
          onBlur={() => setFocus(false)}
        />
        {props.children ||
          (props.appendsource ? (
            <Image source={props.appendsource} style={inputStyles.appendIcon} />
          ) : null)}
      </Animated.View>
    </Shadow>
  )
})
const inputStyles = StyleSheet.create({
  inputWrap: {
    borderColor: '#fff',
    height: 42,
    borderWidth: 1,
    borderTopRightRadius: 16,
    borderRadius: 8,
    marginBottom: 22,
    backgroundColor: '#f4989c',
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: 12,
    width: '100%',
  },
  input: {
    height: 42,
    fontSize: 14,
    color: 'white',
    flex: 1,
  },
  appendIcon: {
    width: 18,
    height: 18,
    resizeMode: 'contain',
    marginLeft: 12,
  },
})
